<template>
	<div id="Pmain" style="width: 100%;">
		<el-form ref="form" style="width: 1800px;display: inline-block;" label-width="80px">
			<el-form-item style="width:250px;display: inline-block;margin-left: -450px;" label="巡检任务编号"
				label-width="100px">
				<el-input v-model="PsInspectiontaskMain.inspectiontaskcode"></el-input>
			</el-form-item>
			<el-form-item style="width:250px;display: inline-block;" label="巡检任务名称" label-width="100px">
				<el-input v-model="PsInspectiontaskMain.inspectiontaskname"></el-input>
			</el-form-item>
			<el-form-item style="width:250px;display: inline-block;" label="任务状态">
				<el-select v-model="PsInspectiontaskMain.taskstatus" placeholder="请选择活动区域">
					<el-option label="请选择"></el-option>
					<el-option v-for="item in recordsconfig" :key="item.configvaluename" :value="item.configvalueid"
						:label="item.configvaluename"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item style="width:250px;display: inline-block;" label="下发人">
				<el-input v-model="PsInspectiontaskMain.issuedbyname"></el-input>
			</el-form-item>
			<el-form-item label="下发时间" style="width:400px;display: inline-block;">
				<el-date-picker type="date" placeholder="选择日期" value-format="yyyy-MM-dd"
					v-model="PsInspectiontaskMain.issuedtime" style="width: 140px;"></el-date-picker>

				<el-date-picker type="date" placeholder="选择日期" value-format="yyyy-MM-dd"
					v-model="PsInspectiontaskMain.finishtime" style="width: 140px;"></el-date-picker>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" icon="el-icon-search" @click="onSubmit()">查询</el-button>
				<el-button type="primary" icon="el-icon-circle-plus-outline" @click="updhandleEdit(null,null)">制定巡检任务</el-button>
			</el-form-item>
		</el-form>
		<template>
			<el-table :data="records" border="1px" stripe style="width: 100%">
				<el-table-column prop="inspectiontaskcode" label="任务编号" width="120">
				</el-table-column>
				<el-table-column prop="inspectiontaskname" label="任务名称" width="120">
				</el-table-column>
				<el-table-column prop="linename" label="巡检线路" width="120">
				</el-table-column>
				<el-table-column prop="startpolecode" label="起始杆号" width="120">
				</el-table-column>
				<el-table-column prop="endpolecode" label="终止杆号" width="120">
				</el-table-column>
				<el-table-column prop="issuedbyname" label="下发人" width="120">
				</el-table-column>
				<el-table-column prop="issuedtime" label="下发时间" width="120">
				</el-table-column>
				<el-table-column prop="taskstatusname" label="任务状态" width="120">
				</el-table-column>
				<el-table-column prop="finishtime" label="任务完成时间" width="120">
				</el-table-column>
				<el-table-column prop="iscancel" :formatter="yesno" label="任务是否取消" width="80">
				</el-table-column>
				<!-- <el-table-column prop="caozuo" label="操作" >
				</el-table-column> -->
				<el-table-column label="操作" width="250px">
					<template slot-scope="scope">
						<el-button size="mini" type="primary"
							@click="handleEdit(scope.$index, scope.row)">查看</el-button>
						<el-button v-if="iscazuo(scope.row.taskstatusname)" size="mini"
							@click="handleEdit(scope.$index, scope.row)">分配任务</el-button>
						<el-button v-if="iscazuo(scope.row.taskstatusname)" size="mini"
							@click="updhandleEdit(scope.$index, scope.row)">修改</el-button>
						<el-button v-if="iscazuo2(scope.row.taskstatusname)" size="mini"
							@click="isCancel(scope.$index, scope.row)">取消</el-button>
					</template>
				</el-table-column>
			</el-table>
		</template>
		<el-pagination style="margin-top: 20px;" @current-change="handleCurrentChange"
			:current-page.sync="PsInspectiontaskMain.current" :page-size="PsInspectiontaskMain.size"
			:total="PsInspectiontaskMain.total" background layout="prev, pager, next">
		</el-pagination>
		<el-dialog title="修改" :visible.sync="updadddialogFormVisible" :append-to-body="true">
			<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
				<el-form-item label="活动名称" prop="name">
					<el-input v-model="ruleForm.name"></el-input>
				</el-form-item>
				<el-form-item label="活动区域" prop="region">
					<el-select v-model="ruleForm.region" placeholder="请选择活动区域">
						<el-option label="区域一" value="shanghai"></el-option>
						<el-option label="区域二" value="beijing"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="活动时间" required>
					<el-col :span="11">
						<el-form-item prop="date1">
							<el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date1"
								style="width: 100%;"></el-date-picker>
						</el-form-item>
					</el-col>
					<el-col class="line" :span="2">-</el-col>
					<el-col :span="11">
						<el-form-item prop="date2">
							<el-time-picker placeholder="选择时间" v-model="ruleForm.date2"
								style="width: 100%;"></el-time-picker>
						</el-form-item>
					</el-col>
				</el-form-item>
				<el-form-item label="即时配送" prop="delivery">
					<el-switch v-model="ruleForm.delivery"></el-switch>
				</el-form-item>
				<el-form-item label="活动性质" prop="type">
					<el-checkbox-group v-model="ruleForm.type">
						<el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
						<el-checkbox label="地推活动" name="type"></el-checkbox>
						<el-checkbox label="线下主题活动" name="type"></el-checkbox>
						<el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
					</el-checkbox-group>
				</el-form-item>
				<el-form-item label="特殊资源" prop="resource">
					<el-radio-group v-model="ruleForm.resource">
						<el-radio label="线上品牌商赞助"></el-radio>
						<el-radio label="线下场地免费"></el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="活动形式" prop="desc">
					<el-input type="textarea" v-model="ruleForm.desc"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
					<el-button @click="resetForm('ruleForm')">重置</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		name: "Pmain",
		data() {
			return {
				updadddialogFormVisible:false,
				ruleForm: {
					name: '',
					region: '',
					date1: '',
					date2: '',
					delivery: false,
					type: [],
					resource: '',
					desc: ''
				},
				rules: {
					name: [{
							required: true,
							message: '请输入活动名称',
							trigger: 'blur'
						},
						{
							min: 3,
							max: 5,
							message: '长度在 3 到 5 个字符',
							trigger: 'blur'
						}
					],
					region: [{
						required: true,
						message: '请选择活动区域',
						trigger: 'change'
					}],
					date1: [{
						type: 'date',
						required: true,
						message: '请选择日期',
						trigger: 'change'
					}],
					date2: [{
						type: 'date',
						required: true,
						message: '请选择时间',
						trigger: 'change'
					}],
					type: [{
						type: 'array',
						required: true,
						message: '请至少选择一个活动性质',
						trigger: 'change'
					}],
					resource: [{
						required: true,
						message: '请选择活动资源',
						trigger: 'change'
					}],
					desc: [{
						required: true,
						message: '请填写活动形式',
						trigger: 'blur'
					}]
				}
				//配置表
				,
				PsSystemconfig: {
					"configcode": '',
					"configname": '',
					"configvalueid": '',
					"configvaluename": '',
					"isstart": ''
				},
				//巡检任务表
				PsInspectiontaskMain: {
					"id": 0,
					"inspectiontaskcode": '',
					// /* 巡检任务编号 */
					"inspectiontaskname": '',
					// /* 巡检任务名称 */
					// "linename": '',
					// /* 所属线路名称 */
					// "lineid": '',
					// /* 所属线路Id */
					// "startpolecode": '',
					// /* 起始杆号 */
					// "endPoleCode": '',
					// /* 终止杆号 */
					"issuedbyname": '',
					// /* 下发人名称 */
					"issuedtime": '',
					// /* 任务下发时间 */
					"taskstatus": '',
					// /* 任务状态编号 */
					// "taskstatusname": '',
					// /* 任务状态名称 */
					"finishtime": '',
					// /* 任务完成时间 */
					"iscancel": '1' /* 是否取消 */ ,
					current: 1,
					size: 2,
					total: 0
				},
				PsInspectiontaskMain2: {
					"id": 0,
					"iscancel": '1' /* 是否取消 */
				},
				records: [],
				/* 用来接收巡检任务表数据 */
				recordsconfig: [],
				/* 用来接配置表数据 */
				gg: 0
			};
		},
		methods: {
			updhandleEdit(index,row){
				this.updadddialogFormVisible=true;
			},
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						alert('submit!');
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			resetForm(formName) {
				this.$refs[formName].resetFields();
			},
			// 点击取消修改事件
			isCancel(index, row) {
				if (row.iscancel != 1) {
					var result = confirm("取消成功!");
					if (result == true) {
						this.PsInspectiontaskMain2.id = row.id;
						this.PsInspectiontaskMain2.iscancel = 1;
						let that = this;
						this.axios.post("http://localhost:8080/updmain",
							that.PsInspectiontaskMain2
						).then(function(res) { //修改成功后清除数据
							if (res.data >= 0) {
								alert("任务已取消!");
								that.onSubmit();
							}
						}).catch(err => {
							alert(err)
						});
					}

				} else {
					alert("任务已取消,请勿重复操作!")
				}

			},
			// 判断数据禁用按钮
			iscazuo2(gg) {
				// alert(gg)
				if (gg == "执行中" || gg == "已完成") {
					return false;
				} else {
					return true;
				}
			},
			// 判断数据禁用按钮
			iscazuo(gg) {
				// alert(gg)
				if (gg == "执行中" || gg == "已完成" || gg == "已分配") {
					return false;
				} else {
					return true;
				}
			},
			// 任务是否取消转换
			yesno(row, column, cellValue) {
				if (cellValue == '0') {
					return "否"
				} else if (cellValue == "1") {
					return "是"
				}
			},
			//查询巡检任务表
			onSubmit() {
				// alert(this.PsInspectiontaskMain.issuedtime)
				let that = this;
				this.axios.get("http://localhost:8080/selectbypage", {
					params: that.PsInspectiontaskMain
				}).then(function(res) { //修改成功后清除数据
					// alert(JSON.stringify(res))
					that.records = res.data.records;
					that.PsInspectiontaskMain.current = res.data.current;
					that.PsInspectiontaskMain.size = res.data.size;
					that.PsInspectiontaskMain.total = res.data.total;
				}).catch(err => {
					alert(err)
				});
			},
			// 分页的点击事件
			handleCurrentChange(gg) {
				this.PsInspectiontaskMain.current = gg;
				this.onSubmit()
			},
			//下拉框任务状态的展示
			LoadTaskStatus() {
				let that = this;
				this.axios.get("http://localhost:8080/selectconfig").then(function(res) {
					// alert(JSON.stringify(res))
					that.recordsconfig = res.data;
				}).catch(err => {
					alert(err)
				});
			}
		},
		mounted() {
			this.onSubmit();
			this.LoadTaskStatus();
		}

	}
</script>

<style>
	.el-row {
		margin-bottom: 20px;

		&:last-child {
			margin-bottom: 0;
		}
	}

	.el-col {
		border-radius: 4px;
	}

	.bg-purple-dark {
		background: #99a9bf;
	}

	.bg-purple {
		background: #d3dce6;
	}

	.bg-purple-light {
		background: #e5e9f2;
	}

	.grid-content {
		border-radius: 4px;
		min-height: 36px;
	}

	.row-bg {
		padding: 10px 0;
		background-color: #f9fafc;
	}

	.el-main {
		top: 80px;
	}
</style>